import { useState } from 'react';
import type { NextPage } from "next";
import Link from "next/link";
import { Button, Avatar, Dropdown, Menu, message } from "antd";
import request from 'service/fetch';
import { LoginOutlined, HomeOutlined } from "@ant-design/icons";
import Login from 'components/Login';
import { useRouter } from "next/router";
import styles from "./index.module.scss";
import { navs } from "./config";

const Navber: NextPage = () => {
  const userId = ""; // 判断是否登录
  console.log(request,'requestInstance')
  // 是否显示登录框
  const [isShowLogin, setIsShowLogin] = useState(false);
  // 路由信息
  const { pathname, push } = useRouter();
  // 写文章
  const handleGotoEditorPage = () => {
    if (userId) {
      push("/editor/new");
    } else {
      message.warning("请先登录");
    }
  };
  // 登录
  const handleLogin = () => {
    setIsShowLogin(true);
    console.log("登录");
  };
  // 个人主页
  const handleGotoPersonalPage = () => {
    push(`/user/${userId}`);
  };
  //退出系统
  const handleLogout = () => {
    // request.post('/api/user/logout').then((res: any) => {
    //   if (res?.code === 0) {
    //     store.user.setUserInfo({});
    //   }
    // });
  };
  // 关闭登录
  const handleClose = () => {
    setIsShowLogin(false);
  };
  const renderDropDownMenu = () => {
    return (
      <Menu>
        <Menu.Item onClick={handleGotoPersonalPage}>
          <HomeOutlined />
          &nbsp; 个人主页
        </Menu.Item>
        <Menu.Item onClick={handleLogout}>
          <LoginOutlined />
          &nbsp; 退出系统
        </Menu.Item>
      </Menu>
    );
  };
  return (
    <div className={styles.navbar}>
      <section className={styles.logoArea}>BLOG-C</section>
      <section className={styles.linkArea}>
        {navs?.map((nav) => (
          <Link key={nav?.label} href={nav?.value}>
            <span className={pathname === nav?.value ? styles.active : ""}>
              {nav?.label}
            </span>
          </Link>
        ))}
      </section>
      <section className={styles.operationArea}>
        <Button onClick={handleGotoEditorPage}>写文章</Button>

        {userId ? (
          <>
            <Dropdown overlay={renderDropDownMenu()} placement="bottomLeft">
              {/* <Avatar src={avatar} size={32} /> */}
            </Dropdown>
          </>
        ) : (
          <Button type="primary" onClick={handleLogin}>
            登录
          </Button>
        )}
         <Login isShow={isShowLogin} onClose={handleClose} />
      </section>
    </div>
  );
};

export default Navber;
